@import './oreo-flex.less';
@gridPrefixCls: oreo-grid;
.@{gridPrefixCls} {
    .@{flexPrefixCls} {
        background-color: @fill-base;
    }
    .@{gridPrefixCls}__item {
        position: relative;
        background-color: @fill-base;
    }
    .@{gridPrefixCls}__content {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 15px 0;
    }
    .@{gridPrefixCls}__item_active {
        background-color: @fill-tap;
    }
    .@{gridPrefixCls}__icon {
        position: relative;
        width: 25%;
        height: 25%;
    }
    .@{gridPrefixCls}__text {
        margin-top: @v-spacing-md;
        font-size: @font-size-title;
        color: @color-text-base;
        text-align: center;
    }
}

.@{gridPrefixCls}_line {
    .@{flexPrefixCls} {
        position: relative;
        &:after {
            .setBottomLine(@border-color-base);
        }
        &:last-child {
            .removeRightOrBottomLine();
        }
    }
    .@{gridPrefixCls}__item {
        &:after {
            .setRightLine(@border-color-base);
        }
        &:last-child {
            .removeRightOrBottomLine();
        }
    }
}

.@{gridPrefixCls}_square {
    .@{gridPrefixCls}__item {
        &:before {
            display: block;
            content: '';
            padding-bottom: 100%;
        }
    }
    .@{gridPrefixCls}__content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .@{gridPrefixCls}__icon {
        width: 28%;
        height: 28%;
    }
    .@{gridPrefixCls}__text {
        margin-top: @v-spacing-lg;
        font-size: @font-size-title;
        color: @color-text-base;
        text-align: center;
    }
}